<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="1000px">
      <el-form ref="formData" :rules="rules" :model="formData" label-width="120px" size="small">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="employeeNumber" label="工号">
              <el-input v-model="formData.employeeNumber" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="surname" label="姓氏">
              <el-input v-model="formData.surname" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="name" label="名字">
              <el-input v-model="formData.name" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="englishName" label="英文名">
              <el-input v-model="formData.englishName" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="deptIds" label="部门">
              <el-cascader
                v-if="!disabled"
                ref="cascader"
                v-model="formData.deptIds"
                filterable
                :options="depts"
                :show-all-levels="false"
                placeholder="部门"
                :key="cascaderKey"
                :props="{ value: 'value', label: 'title',checkStrictly: true}"
                size="small"
              ></el-cascader>
              <el-input v-model="formData.deptName" disabled v-if="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="postIds" label="职位">
              <el-select
                v-model="formData.postIds"
                multiple
                collapse-tags
                filterable
                size="small"
                :disabled="disabled"
              >
                <el-option
                  :label="item.postName"
                  :value="item.postId"
                  v-for="item in postAll"
                  :key="item.postId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="entryTime" label="入职时间">
              <el-date-picker v-model="formData.entryTime" type="date" ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="formalTime" label="转正时间">
              <el-date-picker v-model="formData.formalTime" type="date" ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="sex" label="性别">
              <el-select v-model="formData.sex" clearable :disabled="disabled">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="maritalStatus" label="婚姻状况">
              <el-select v-model="formData.maritalStatus" clearable>
                <el-option label="已" value="1"></el-option>
                <el-option label="未" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="identityNumber" label="身份证号">
              <el-input v-model="formData.identityNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="identityValidity" label="身份证有效期">
              <el-date-picker
                v-model="formData.identityValidity"
                type="date"
                
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="birthDate" label="出生日期">
              <el-date-picker v-model="formData.birthDate" type="date" ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="age" label="年龄">
              <el-input-number v-model="formData.age"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="politicCountenance" label="政治面貌">
              <el-input v-model="formData.politicCountenance"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="nation" label="民族">
              <el-input v-model="formData.nation"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="householdRegister" label="户籍">
              <el-input v-model="formData.householdRegister"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="nativePlace" label="籍贯">
              <el-input v-model="formData.nativePlace"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="permanentResidence" label="户口所在地址">
              <el-input v-model="formData.permanentResidence"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="currentAddress" label="现居地址">
              <el-input v-model="formData.currentAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="phoneNumber" label="联系方式">
              <el-input v-model="formData.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="contractStartDate" label="合同开始日期">
              <el-input v-model="formData.contractStartDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="contractEndDate" label="合同结束日期">
              <el-input v-model="formData.contractEndDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="graduateSchool" label="毕业学校">
              <el-input v-model="formData.graduateSchool"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="graduateTime" label="毕业时间">
              <el-date-picker v-model="formData.graduateTime" type="date" ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="degree" label="学历">
              <el-input v-model="formData.degree"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="major" label="专业">
              <el-input v-model="formData.major"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="qualification" label="职业资格">
              <el-input v-model="formData.qualification"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="fundNumber" label="个人公积金账号">
              <el-input v-model="formData.fundNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="socialSecurityNumber" label="社保账号">
              <el-input v-model="formData.socialSecurityNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item prop="emergencyContact" label="紧急联系人姓名">
              <el-input v-model="formData.emergencyContact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="emergencyContactAddress" label="紧急联系人地址">
              <el-input v-model="formData.emergencyContactAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="emergencyContactPhone" label="紧急联系人号码">
              <el-input v-model="formData.emergencyContactPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row v-if="disabled">
          <el-col :span="8">
            <el-form-item prop="jobStatus" label="状态">
              <el-select v-model="formData.jobStatus" filterable size="small">
                <el-option label="在职" :value="1"></el-option>
                <el-option label="辞职" :value="2"></el-option>
                <el-option label="辞退" :value="3"></el-option>
                <el-option label="严重违纪开除" :value="4"></el-option>
                <el-option label="停薪留职" :value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm('formData')"
          size="small"
          :disabled="loading"
          :icon="loading?'el-icon-loading':'el-icon-circle-plus-outline'"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveUserInfo } from "@/api/addressBook";
import { getDeptList, listPost } from "@/api/system";
export default {
  data() {
    return {
      open: false,
      formData: {},
      depts: [],
      postAll: [],
      cascaderKey: 1,
      loading: false,
      title: "",
      rules: {
        employeeNumber: [
          { required: true, message: "请输入工号", trigger: "blur" }
        ],
        surname: [{ required: true, message: "请输入姓氏", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        englishName: [
          { required: true, message: "请输入英文名", trigger: "blur" }
        ],
        deptIds: [{ required: true, message: "请选择部门", trigger: "change" }],
        postIds: [{ required: true, message: "请选择职位", trigger: "change" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }]
      },
      disabled: false
    };
  },
  methods: {
    add() {
      this.title = "新增";
      this.disabled = false;
      this.loadDeptList();
      this.loadListPost();
      ++this.cascaderKey;
      this.formData = this.form();
      this.open = true;
    },
    edit(rows) {
      const row = JSON.parse(JSON.stringify(rows));
      this.title = "编辑人员";
      this.disabled = true;
      this.formData = row;
      ++this.cascaderKey;
      this.open = true;
      this.loadListPost();
      this.loadDeptList();
      this.formData.deptIds = [Number(row.deptId)];
      // console.log(this.formData.deptIds);
    },
    form() {
      return {
        age: "",
        birthDate: "",
        contractStartDate: "",
        currentAddress: "",
        degree: "",
        deptIds: [],
        emergencyContact: "",
        emergencyContactAddress: "",
        emergencyContactPhone: "",
        employeeNumber: "",
        englishName: "",
        entryTime: "",
        formalTime: "",
        fundNumber: "",
        graduateSchool: "",
        graduateTime: "",
        householdRegister: "",
        identityNumber: "",
        identityValidity: "",
        major: "",
        maritalStatus: "",
        name: "",
        nation: "",
        nativePlace: "",
        permanentResidence: "",
        phoneNumber: "",
        politicCountenance: "",
        postIds: [],
        qualification: "",
        sex: "",
        socialSecurityNumber: "",
        surname: ""
      };
    },
    loadDeptList() {
      this.depts = [{ key: "0", value: "0", title: "无" }];
      getDeptList().then(res => {
        this.buildtree(res.data.rows, this.depts, 0);
      });
    },
    buildtree(list, arr, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.deptId,
            value: item.deptId + "",
            title: item.deptName,
            children: []
          };
          this.buildtree(list, child.children, item.deptId);
          if (child.children.length === 0) {
            delete child.children;
          }
          arr.push(child);
        }
      });
    },
    loadListPost() {
      listPost().then(res => {
        this.postAll = res.data.rows;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          if (!this.disabled) {
            this.formData.deptId = this.formData.deptIds[
              this.formData.deptIds.length - 1
            ];
          }
          saveUserInfo(
            this.formData.userId > 0 ? this.formData : [this.formData]
          ).then(res => {
            this.loading = false;
            if (res.data.code === this.ERR_OK) {
              this.$message.success(res.data.msg);
              this.open = false;
              this.$emit("load");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
</style>